<script lang="ts" setup>
import { useMessage } from 'wot-design-uni'
import { formatMoney } from '@/utils'

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '订单',
  },
})
function back() {
  uni.navigateBack()
}
const message = useMessage()
const addressInfo = ref<any>({})
const goodsInfo = ref<any>({})
const formData = reactive({
  note: '',
  uid: '1',
  num: 1,
  address_id: '',
  goods_id: '',
  env: 2,
})
const payInfo = ref<any>({})
onShow(() => {
  const data = uni.getStorageSync('address')
  addressInfo.value = data
  formData.address_id = data.id
})
onLoad((options: any) => {
  const data = JSON.parse(decodeURIComponent(options.query))
  goodsInfo.value = data
  formData.num = data.num
  formData.goods_id = data.id
})
function handleAddress() {
  uni.navigateTo({
    url: '/pages/address/list',
  })
}

// function onBridgeReady(data: any) {
//   console.log('onBridgeReady', data)
//   WeixinJSBridge.invoke('getBrandWCPayRequest', {
//     "appId": data.appId,     //公众号ID，由商户传入
//     "timeStamp": data.timeStamp,     //时间戳，自1970年以来的秒数
//     "nonceStr": data.nonceStr,      //随机串
//     "package": 'prepay_id=' + data.prepay_id,
//     "signType": data.signType,     //微信签名方式：
//     "paySign": data.paySign, //微信签名
//     "trade_type": "JSAPI"
//   },
//     function (res: any) {
//       if (res.err_msg == "get_brand_wcpay_request:ok") {
//         // 支付成功的回调
//         uni.showToast({ title: '支付成功！', icon: 'success' });
//       } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
//         // 支付取消的回调
//         uni.showToast({ title: '用户取消支付', icon: 'none' });
//       } else {
//         // 支付失败的回调
//         uni.showToast({ title: `支付失败: ${res.err_msg}`, icon: 'error' });
//       }
//       /**
//        * 其它
//        * 1、请检查预支付会话标识prepay_id是否已失效
//        * 2、请求的appid与下单接口的appid是否一致
//        * */
//       if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {

//       }
//     })
// }
// // #ifdef H5
// if (typeof WeixinJSBridge == "undefined") {
//   if (document.addEventListener) {
//     document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
//   } else if (document.attachEvent) {
//     document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
//     document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
//   }
// } else {
//   console.log('weixinJSBridgeReady')
//   // onBridgeReady(payInfo.value);
// }
// // #endif
// const handlePayment = async () => {
//   // message.confirm({
//   //       msg: '请您使用APP支付',
//   //       title: '系统提示'
//   //     }).then(() => {

//   //     }).catch(() => {
//   //       console.log('点击了取消按钮')
//   //     })
//   const res = await wxPaymentAPI(formData)
//   payInfo.value = res.data
//   onBridgeReady(payInfo.value)
// }
</script>

<template>
  <view>
    <wd-navbar title="订单" safeareainsettop leftarrow placeholder fixed :bordered="false" @click-left="back" />
    <view class="bg-white px-[24rpx] py-[30rpx]">
      <view class="ml-[10rpx]">
        <view v-if="addressInfo" class="ml-[10rpx] flex items-center justify-between">
          <view class="flex-1">
            <view class="flex">
              <wd-img width="48rpx" height="48rpx" src="https://cdn.hnqingnai.com/prod/shouliaot/file/address.png" />
              <view class="id-info">
                <text class="mx-[10rpx]">{{ addressInfo.name }}</text><text>
                  {{ addressInfo.telephone
                  }}
                </text>
              </view>
            </view>
            <view class="mt-[10rpx] text-[28rpx] text-[#c8c7cc]">
              {{ addressInfo.address }}
            </view>
          </view>
          <view class="ml-[30rpx] flex items-center text-[#c8c7cc]" @click="handleAddress">
            地址修改<wd-icon
              name="arrow-right" size="22px" color="#c8c7cc"
            />
          </view>
        </view>
        <view v-else class="flex items-center justify-between" @click="handleAddress">
          <view class="flex items-center">
            <wd-img width="48rpx" height="48rpx" src="https://cdn.hnqingnai.com/prod/shouliaot/file/address.png" />
            <view class="ml-[10rpx] text-[#c8c7cc]">
              请选择收货地址
            </view>
          </view>
          <wd-icon name="arrow-right" size="22px" color="#c8c7cc" />
        </view>
      </view>
    </view>
    <!-- 商品信息 -->
    <view class="mt-[10rpx] bg-white px-[24rpx] pt-[30rpx]">
      <view class="mb-[30rpx] border-b-[2rpx] border-b-[#f8f8f8] border-b-solid pb-[30rpx] text-[30rpx] font-bold">
        商品信息
      </view>
      <view class="flex border-b-[2rpx] border-b-[#f8f8f8] border-b-solid pb-[30rpx]">
        <wd-img width="180rpx" height="180rpx" radius="10rpx" :src="goodsInfo.cover[0]" />
        <view class="ml-[14rpx] flex flex-1 flex-col justify-between">
          <view class="line-clamp-3 text-[30rpx] font-bold">
            {{ goodsInfo.content }}
          </view>
          <view class="flex items-center justify-between">
            <view class="text-[36rpx] text-[#EB0E26] font-bold">
              <text class="text-[24rpx]">￥</text>{{
                formatMoney(goodsInfo.price) }}
            </view>
            <view class="text-[24rpx] text-[#c0c0c0]">
              数量x{{ formData.num }}
            </view>
          </view>
        </view>
      </view>
      <!--  备注  -->
      <view class="flex items-center justify-between py-[40rpx]">
        <view>订单备注</view>
        <wd-input
          v-model="formData.note" style="flex: 1" type="text" custom-input-class="text-right" placeholder-class="text-right"
          no-border placeholder="给商家留言（100字内）"
        />
      </view>
    </view>
    <view class="bg-white px-[24rpx]">
      <view class="mt-[14rpx] flex items-center justify-between py-[30rpx]">
        <view>运费</view>
        <view>包邮</view>
      </view>
      <view class="h-[2rpx] bg-[#f8f8f8]" />
      <view class="flex items-center justify-between py-[30rpx]">
        <view>商品合计</view>
        <view>{{ formatMoney(goodsInfo.price * goodsInfo.num) }}</view>
      </view>
    </view>
    <view class="fixed bottom-0 left-0 right-0 h-[120rpx] flex items-center justify-between leading-[120rpx]">
      <view class="h-100% w-60% bg-white pl-[24rpx] text-[36rpx] text-[#EB0E26] font-bold">
        <text
          class="text-[26rpx] text-[#c8c7cc]"
        >
          应付金额：
        </text><text>￥ </text>{{ formatMoney(goodsInfo.price
          * goodsInfo.num) }}
      </view>
      <view class="h-100% w-40% bg-[#34D19D] text-center text-[#36rpx] text-[#fff] font-bold" @click="handlePayment">
        确认订单
      </view>
    </view>
    <wd-message-box />
  </view>
</template>
